<template>
  <section>
    <el-button type="text"
               @click="handleClick">{{title}}</el-button>
    <WaybillDeviceLoader v-if="isLoader"
                         :waybill-id="waybillId" />
  </section>
</template>

<script>
import WaybillDeviceLoader from "@/components/basic/WaybillDeviceLoader.vue"
import axios from 'axios'
import _ from 'lodash'
import { mapState } from "vuex";
export default {
  name: "WaybillDeviceRefresh",
  components: {
    WaybillDeviceLoader
  },
  inject: ["$table"],
  props: {
    record: {
      type: Object,
      default: () => { }
    },
    url: {
      type: String,
      default: null
    },
    // 按钮名称
    title: String
  },
  data () {
    return {
      isLoader: false
    }
  },
  computed: {
    ...mapState({
      waybillDeviceTraces: (state) => state.deviceTrace.waybillDeviceTraces
    }),
    waybillId () {
      return this.record.waybillId
    }
  },
  methods: {
    handleClick: _.debounce(function () {
      this.$confirm("确认刷新？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.refresh();
      });
    }, 600),
    async refresh () {
      this.isLoader = false;
      let response = await axios.post(this.url, { waybillId: this.waybillId });
      if (response.code === 0 && response.data) {
        delete this.waybillDeviceTraces[this.waybillId]
        this.$store.commit("deviceTrace/WAYBILL_CHANGEDEVICETRACE", this.waybillDeviceTraces);
        this.isLoader = true;
        this.$table.search();
      } else {
        this.$message({ type: "error", message: response.message });
      }
    }
  }
}
</script>
<style scoped lang="scss">
.arrow {
  color: var(--prev-color-text-regular);
  font-size: 13px;
  padding: 0;
}
</style>